<template>
    <div>
        <H1>欢迎{{username}}登陆成功</H1>
        <h1>房号显示列表</h1>
        房间编号
        <input type="text" v-model="datalist.fhname">
        房间类型
        <select v-model="datalist.xlk">
            <option value="0">请选择</option>
            <option v-for="d in dataxlk" :value="d.FXId">{{ d.Fxname }}</option>
        </select>
        <input type="button" value="查询" @click="getdata()">
        <input type="button" value="重置" @click="cz()">
        <input type="file" @change="piliang">
        <table class="table">
            <thead>
                <tr>
                    <td>房号id</td>
                    <td>房号编号</td>
                    <td>房号外键</td>
                    <td>房号图片</td>
                    <td>房号金额</td>
                    <td>房号状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{a.BId}}</td>
                    <td>{{a.Fhname}}</td>
                    <td>{{a.Fxname}}</td>
                    <td>
                        <img :src="'https://localhost:7293/'+a.fhtupian" style="height: 100px;width: 100px;">
                    </td>
                    <td>{{a.jiane}}</td>
                    <td>
                        <span v-if="a.zhuangtai==1">
                            空
                        </span>
                        <span v-if="a.zhuangtai==2">
                            已入住
                        </span>
                        <span v-if="a.zhuangtai==3">
                            维修中
                        </span>
                        <span v-if="a.zhuangtai==4">
                            待处理
                        </span>
                    </td>
                    <td>
                        <input type="button" value="修改" @click="xiu(a.BId)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    当前第{{datalist.pagindex}}页，一共{{datazong.zongye}}页，每页{{datalist.pagsize}}条，一共{{datazong.zongtiao}}条
    <input type="button" value="首页" @click="fanye(1)" >
    <input type="button" value="上一页" @click="fanye(2)" >
    <input v-for="c in datazong.zongye" type="button" :value="c" @click="zhiding(c)" >
    <input type="button" value="下一页" @click="fanye(3)" >
    <input type="button" value="尾页" @click="fanye(4)" >
    <select v-model="datalist.pagsize" @click="tiao">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <input type="number" v-model="zhuan" @change="jue(zhuan)" style="width: 50px;">
    <br>
    <a href="/denglu">登录</a>
    <br>
    <a href="/add">添加</a>
</template>
<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { useuserStore } from '@/stores/useinfo';
const user=useuserStore();
//实例化
const router=useRouter();
const route=useRoute();
const data=ref([
{
      "Fhname": "1001",
      "BId": 1,
      "fxid": 1,
      "zhuangtai": 0,
      "jiane": 100,
      "Fxname": "标准间",
      "fhtupian": "/pic/1.jpg"
    }
]);
onMounted(()=>{
    dataget();
    datafor();
    getdata();
})
//批量添加数据
const piliang=(e:any)=>{
    var n=e.target.files[0];
    var fn=new FormData();
    fn.append("file",n);
    axios.post("https://localhost:7293/api/Fhall/PiliangAdd",fn).then(res=>{
        if(res.data>0)
        {
            alert("批量添加成功");
            getdata();
        }
        else
        {
            alert("批量添加失败");
        }
    })
}
//用户名
const username=ref("");
const dataget=()=>{
    username.value=user.useinfo.name
}
//修改跳转页
const xiu=(e:any)=>{
    router.push({path:"/xg",query:{id:e}});
}
//重置
const cz=()=>{
    datalist.value={fhname:"",
    pagindex:1,
    pagsize:2,
    xlk:0}
    getdata();
}
const jue =(p:number)=>{
    if(p>=1 && p<=datazong.value.zongye)
    {
        datalist.value.pagindex=p;
        getdata();
    }
}
const zhuan=ref<number>();
const datalist=ref({
    fhname:"",
    pagindex:1,
    pagsize:2,
    xlk:0
});
//总
const datazong=ref({
    zongtiao:0,
    zongye:0
});
//翻页
const fanye=(val:any)=>{
    if(val==1)
    {
        datalist.value.pagindex=1;
        getdata();
    }
    if(val==2)
    {
        if(datalist.value.pagindex>1)
        {
            datalist.value.pagindex -=1;
            getdata();
        }
    }
    if(val==3)
    {
        if(datalist.value.pagindex<datazong.value.zongye)
        {
            datalist.value.pagindex +=1;
            getdata();
        }
    }
    if(val==4)
    {
        datalist.value.pagindex=datazong.value.zongye;
        getdata();
    }
}
//指定页
const zhiding=(val:any)=>{
    datalist.value.pagindex=val;
    getdata();
}
//页容量
const tiao=(val:any)=>{
    getdata();
}
const getdata=()=>{
    axios.get("https://localhost:7293/api/Fhall/Showfh",{params:datalist.value}).then(res=>{
        data.value=res.data.list;
        //计算总条数
        datazong.value.zongtiao=res.data.data;
        //计算总页数
        datazong.value.zongye=Math.ceil(datazong.value.zongtiao/datalist.value.pagsize);
    })
}

const dataxlk=ref([ {
    "FXId": 0,
    "Fxname": ""
  }]);
const datafor=()=>{
    axios.get("https://localhost:7293/api/Fhall/fxlist").then(res=>{
        dataxlk.value=res.data
    })
}






</script>

<style scoped>

</style>